.vxe-form-design {
  .vxe-form-design--widget-form-item-layout {
    display: flex;
    flex-direction: row;
  }
  .vxe-form-design--widget-form-item-option {
    width: 50%;
    text-align: center;
    padding: var(--vxe-ui-layout-padding-default);
    margin: 0 var(--vxe-ui-layout-padding-default);
    border: 1px solid var(--vxe-ui-input-border-color);
    border-radius: var(--vxe-ui-base-border-radius);
    cursor: pointer;
    &.is--vertical {
      .vxe-form-design--widget-form-item-option-row {
        display: flex;
        flex-direction: column;
        &:nth-child(1) {
          &::before {
            content: "";
            display: block;
            width: 30%;
            height: 1.2em;
            margin: 2px;
            background-color: var(--vxe-ui-font-tinge-color);
            border-radius: var(--vxe-ui-base-border-radius);
          }
        }
        &:nth-child(2) {
          &::before {
            content: "";
            display: block;
            width: 100%;
            height: 1.2em;
            margin: 2px;
            background-color: var(--vxe-ui-font-tinge-color);
            border-radius: var(--vxe-ui-base-border-radius);
          }
        }
      }
    }
    &.is--horizontal {
      .vxe-form-design--widget-form-item-option-row {
        display: flex;
        flex-direction: row;
        &:nth-child(1),
        &:nth-child(2) {
          &::before {
            content: "";
            display: block;
            width: 30%;
            height: 1.2em;
            margin: 2px;
            background-color: var(--vxe-ui-font-tinge-color);
            border-radius: var(--vxe-ui-base-border-radius);
          }
          &::after {
            content: "";
            display: block;
            width: 70%;
            height: 1.2em;
            margin: 2px;
            background-color: var(--vxe-ui-font-tinge-color);
            border-radius: var(--vxe-ui-base-border-radius);
          }
        }
      }
    }
    &:hover {
      border-color: var(--vxe-ui-font-primary-color);
    }
    &.is--active {
      color: var(--vxe-ui-font-primary-color);
      border-color: var(--vxe-ui-font-primary-color);
      .vxe-form-design--widget-form-item-option-row {
        &:nth-child(1),
        &:nth-child(2) {
          &::before,
          &::after {
            background-color: var(--vxe-ui-font-primary-color);
          }
        }
      }
    }
  }
  .vxe-form-design--widget-form-item-option-row {
    margin-bottom: 0.2em;
  }
}